<template>
  <!-- 引入并使用自定义导航栏组件 -->
  <custom-navbar title="卡包"></custom-navbar>
  <!-- 页面内容区域，确保内容不被导航栏遮挡 -->
  <scroll-view scroll-y="true" class="contentBox">
   	<view v-for="(item,index) in 10" :key="index" class="list-item" @click="toDetail">
   		<text style="color: orange;">卡号：778889999999</text>
   	</view>
   </scroll-view>
   <uni-fab
	:pattern="pattern"
	:content="content"
	horizontal="right"
	vertical="bottom"
	@trigger="trigger"
	></uni-fab>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar.vue';

export default {
  components: {
    CustomNavbar
  },
  data () {
	  return {
		  pattern: {
			selectedColor: 'red',
			buttonColor: 'red',
		},
		content: [{
				iconPath: '/static/bangqia.png',
				text: '绑卡',
				type: 1
			},
			{
				iconPath: '/static/maiqia.png',
				text: '买卡',
				type: 2
			},
		]
	  }
  },
  methods: {
	  toDetail() {
		uni.navigateTo({
			url:'/pages/card/cardDetail'
		})  
	  },
	  trigger(e) {
		const type = this.content[e.index].type;
		if(type==1){
			uni.navigateTo({
				url:'/pages/card/cardBind'
			})
		}else if(type==2){
			 uni.navigateTo({
			 	url:'/pages/card/cardCreate'
			 })
		}
	},
  }
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}
.contentBox {
  /* 确保内容不被导航栏遮挡 */
  flex-grow: 1;
  height: 1px;
  margin-bottom: 20rpx;
}
.list-item {
	height: 200rpx;
	width: calc(100% - 80rpx);
	background-color: black;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}
</style>